<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>安全预警</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/bean.css" />
    <link rel="stylesheet" type="text/css" href="../css/safetyWarning.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=lIoGcac1MG3uPjTs9BOA3pdfstaDZqeQ"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
</head>

<body>
    <div class="guding .margin-bottom24">
        <nav class="navbar navbar-default g-nav">
            <span class="navbar-brand">全域旅游综合信息服务平台</span>
            <div class=" navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/html/home.html">首页</a></li>
                    <li>
                        <a href="/html/realTimeTraffic.html">智慧分析</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/realTimeTraffic.html">实时客流</a>
                            <a class="sub-nav-item" href="/html/touristPortrait.html">游客画像</a>
                        </div>
                    </li>
                    <li>
                        <a class="active" href="/html/demoareaSupervise.html">智慧监管</a>
                        <div class="sub-nav">
                            <a class="sub-nav-item" href="/html/demoareaSupervise.html">示范区监管</a>
                            <a class="sub-nav-item" href="/html/scenicSpotList.html">视频监控</a>
                            <a class="sub-nav-item active" href="/html/safetyWarning.html">安全预警</a>
                            <a class="sub-nav-item" href="/html/wisdomSupervise_guide.html">旅游产业数据</a>
                            <a class="sub-nav-item" href="/html/complaints.html">投诉举报管理</a>
                        </div>
                    </li>
                    <li><a href="/html/resources.html">旅游资源</a></li>
                </ul>
            </div>
        </nav>
    </div>
    <!--导航结束-->
    <ul class="content  flex">
        <li class="left-map border backgroundfff  margin-right24">
            <div id="cdmap" style="height: 935px;">
            </div>
            <div class="sign-tips">
                <p class="map-p-a"><img src="../img/客流.png" />客流量预警</p>
                <div class="map-span-box map-span-box-a">
                    <span>3个</span>
                    <span>2个</span>
                    <span>1个</span>
                </div>
                <p class="map-p-b"><img src="../img/灾害.png" />自然灾害预警</p>
                <div class="map-span-box-b map-span-box">
                    <span>3个</span>
                    <span>2个</span>
                    <span>1个</span>
                </div>
            </div>
        </li>
        <li class="right-box height952">
            <div class="r-top-table border backgroundfff margin-bottom20 height606">
                <span class="title-b  padding-top22 padding-right10">投诉举报明细列表</span>
                <input type="button" class="inputstyle margin-right8" value="导游" />
                <input type="button" class="inputstyle margin-right8 input-active" value="旅行社" />
                <input type="button" class="inputstyle margin-right8" value="大巴" />
                <input type="button" class="inputstyle margin-right8" value="从业人员" />
                <input type="button" class="inputstyle absolute margin-right8" value="查看更多" />
                <table class="complaint-box__table" border="0" cellspacing="0" cellpadding="0">
                    <thead>
                        <th width="45">序号</th>
                        <th width="100">预警区域</th>
                        <th width="140">预警等级</th>
                        <th width="155">预警时间</th>
                        <th width="236">处理状态</th>
                        <th width="94">安全责任人</th>
                        <th width="auto">安全责任人电话</th>
                    </thead>
                    <tbody>
                        <tr>
                            <td rowspan="2">01</td>
                            <td rowspan="2">都江堰</td>
                            <td><i class="red-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td rowspan="2">已通过短信平台通知安全责任 人<em class="em-text">8/12</em>、附近导游2/4、区域 内导游4/6
                            </td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr>
                            <td><i class="yellow-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr class="focus">
                            <td rowspan="2">01</td>
                            <td rowspan="2">都江堰</td>
                            <td><i class="red-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td rowspan="2">已通过短信平台通知安全责任 人<em class="em-text">8/12</em>、附近导游2/4、区域 内导游4/6
                            </td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr class="focus">
                            <td><i class="yellow-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr>
                            <td rowspan="2">01</td>
                            <td rowspan="2">都江堰</td>
                            <td><i class="red-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td rowspan="2">已通过短信平台通知安全责任 人<em class="em-text">8/12</em>、附近导游2/4、区域 内导游4/6
                            </td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr>
                            <td><i class="yellow-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr class="focus">
                            <td rowspan="2">01</td>
                            <td rowspan="2">都江堰</td>
                            <td><i class="red-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td rowspan="2">已通过短信平台通知安全责任 人<em class="em-text">8/12</em>、附近导游2/4、区域 内导游4/6
                            </td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr class="focus">
                            <td><i class="yellow-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr>
                            <td>01</td>
                            <td>都江堰</td>
                            <td><i class="red-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td>已通过短信平<em class="em-text">8/12</em></td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                        <tr class="focus">
                            <td>01</td>
                            <td>都江堰</td>
                            <td><i class="red-circle"></i>红色预警</td>
                            <td>2017-08-10 16：39</td>
                            <td><em class="em-text">8/12</em> 内导游4/6
                            </td>
                            <td>张麻子</td>
                            <td>18520235455</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <ul class="flex">
                <li class="border backgroundfff margin-right20 height325">
                    <p class="title-b  padding-top22 padding-left29 padding-right10">预警高发景区TOP5</p>
                    <div class="height252" id="echart1">

                    </div>
                </li>
                <li class="border backgroundfff height325">
                    <p class="title-b  padding-top22 padding-left29 padding-right10">景区客流量预警持续时间最长TOP5</p>
                    <div class="height252" id="echart2">

                </li>
            </ul>
        </li>
    </ul>
    <!--内容结束-->
    <script src="../js/jquery-2.1.0.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/lodash.js"></script>
    <script src="../js/safetyWarning.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1i1NHYIPj6ZrjpANKT8eKBD31SLR8X0k"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>

    <script>
        getCharts('echart1', 'bar');
        getCharts('echart2', 'bar-a');
    </script>
    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMap.Map("cdmap");
        map.centerAndZoom("成都", 15);
        map.setMapStyle({
            style: 'midnight'
        });

        var $sign = $('.sign-tips')

        var Icon = BMap.Icon;
        var Size = BMap.Size;
        var Marker = BMap.Marker;
        var Point = BMap.Point;

        var IconSize = new Size(40, 62)
        var icon1 = new Icon('../img/ziran_icon_1.png', IconSize)
        var icon2 = new Icon('../img/ziran_icon_2.png', IconSize)
        var icon3 = new Icon('../img/ziran_icon_3.png', IconSize)
        var icon4 = new Icon('../img/keliu_icon_1.png', IconSize)
        var icon5 = new Icon('../img/keliu_icon_2.png', IconSize)
        var icon6 = new Icon('../img/keliu_icon_3.png', IconSize)

        var icons = [icon1, icon2, icon3, icon4, icon5, icon6]

        var windowContent =
        [
            '        <div class="map-info-window">',
            '        <div class="close-button"></div>',
            '        <div class="map-info-window__title">成都市都江堰景区-北门</div>',
            '        <div class="map-info-window__content">',
            '            <dl>',
            '                <div class="dl-item">',
            '                    <dt>实时人数</dt>',
            '                    <dd><i class="number">4</i><i class="number">3</i><i class="number">3</i><i class="number">2</i></dd>',
            '                </div>',
            '                <div class="dl-item">',
            '                    <dt>预警阈值</dt>',
            '                    <dd>500人</dd>',
            '                </div>',
            '                <div class="dl-item">',
            '                    <dt>预警级别</dt>',
            '                    <dd class="text-orange">橙色预警</dd>',
            '                </div>',
            '                <div class="dl-item">',
            '                    <dt>超出预警</dt>',
            '                    <dd>300人</dd>',
            '                </div>',
            '                <div class="dl-item">',
            '                    <dt>处理状态</dt>',
            '                    <dd>已通过短信平台通知安全责任人8/12、附近导游2/4、区域内导游4/6</dd>',
            '                </div>',
            '                <div class="dl-item">',
            '                    <dt>发生时间</dt>',
            '                    <dd>2017/08/08  19:59</dd>',
            '                </div>',
            '                <div class="dl-item">',
            '                    <dt>持续时间</dt>',
            '                    <dd>1小时20分钟</dd>',
            '                </div>',
            '            </dl>',
            '        </div>',
            '        <div class="map-info-window__bottom">',
            '            <div class="map-info-window__button">处理</div>',
            '        </div>',
            '    </div>'
        ].join("");

        var winOption = {
            width: 440,
            title: ''
        }

        var points = [
            '104.069011,30.581771',
            '104.058016,30.593585',
            '104.088918,30.593958',
            '104.05895,30.571635',
            '104.079216,30.595574',
            '104.072676,30.598123',
        ]

        points.forEach(function(point, i) {
            var pointArr = point.split(',')
            var marker = new Marker(new Point(pointArr[0],pointArr[1]), { icon: icons[i] })
            addMarker(marker)
        })

        function addMarker(marker) {
            map.addOverlay(marker)
            addMarkerHandler(windowContent, marker)
        }

        function addMarkerHandler(content, marker) {
            marker.addEventListener('click', function(e) {
                console.log(this)
                openInfoWin(this, content)
            })
        }

        function openInfoWin(self, content) {
            var win = new BMap.InfoWindow(content, winOption)
            $sign.hide()
            win.addEventListener('close', function() {
                $sign.show()
            })
            self.openInfoWindow(win)
        }

    </script>
</body>

</html>
